<template>
	<div class="map">
		<div class="bg"></div>
		<div class="box">
			<label>
				<HeadImg @img_url='setImg'></HeadImg>
			</label>
			
			<label>
				<span>店铺名称:&nbsp;</span>
				<input type="text" v-model.trim="data.StoreName"/>
			</label>
			<label>
				<span>用户名称:&nbsp;</span>
				<input type="text" v-model.trim="data.name"/>
			</label>
			<label>
				<span>密 &nbsp; &nbsp; 码: &nbsp;</span>
				<input type="password" v-model.trim="password"/>
			</label>
			<label>
				<span>确认密码: &nbsp;</span>
				<input type="password"  v-model.trim="data.password"/>
			</label>
			<div class="button">
				<el-button type="success" @click="upData" round>注册</el-button>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
	import {defineComponent,reactive,ref} from 'vue'
	import {useRouter} from 'vue-router'
	import {ElMessage,ElLoading} from 'element-plus'
	
	import axios from '@assets/request/index';
	import HeadImg from '../../components/common/PeadPortrait/PeadPortrait.vue';
	import {getBase64Image} from '@assets/tools/getBase64Image/index'
	export default defineComponent({
		components:{
			HeadImg
		},
		setup(){
			var router=useRouter()
			var img_list=ref('')
			var password=ref('123456')
			var data=reactive({
				name:'user',
				password:'123456',
				HeadImg:'',
				StoreName:''
			});
			function setImg(url:string){
				img_list.value=url
			}
			async function upData(){
				var msg=''
				if(img_list.value==''){
					msg='请选择头像！'
				}else if(data.StoreName==''){
					msg='请输入店铺名！'	
				}else if(data.StoreName.length>10){
					msg='店铺名称最大长度为10'	
				}else if(data.name==''){
					msg='请输入昵称！'
				}else if(data.name.length>=10){
					msg='昵称长度不能超过10！'
				}else if(password.value==''||data.password==''){
					msg='密码不能为空！'
				}else if(password.value!=data.password){
					msg='密码不一致！'
				}else if(password.value.length<6){
					msg='密码长度不能小于6位'
				}
				if(msg){
					ElMessage.error(msg);
					return;
				};
				 const loading = ElLoading.service({
				    lock: true,
				    text: '注册中...',
				    background: 'rgba(0, 0, 0, 0.7)',
				  })
				data.HeadImg=await getBase64Image(img_list.value)
				var result:any=await axios.post('/admin/business',{
					...data
				});
				if(result.data.state==200){
					loading.close()
					ElMessage({
						type:'success',
						message:'注册成功'
					})
					setTimeout(()=>{
						router.go(-1)
					},500)
				}else{
					loading.close()
					ElMessage.error('用户名已存在!');
				}
			}
			return {img_list,setImg,upData,data,password}
		}
	})
</script>

<style scoped="scoped">
	.map{
		width: 100vw;
		height: 100vh;
		position: relative;
		overflow: hidden;
		display: flex;
		justify-content:center;
		align-items: center;
	}
	.map .bg{
		width: 110%;
		height: 110%;
		position: absolute;
		left: -5%;
		top: -5%;
		background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%3A%2F%2Fdingyue.ws.126.net%2F2021%2F1102%2F8244ee38j00r1xs2e001fc000hs00npc.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655988401&t=ae1cc4000924122ef394517bf6252cbe);
		background-size: auto 100%;
		z-index: -1;
	}
	.map .box{
		margin-top: -10vh;
		width: 90vw;
		height: 80vh;
		min-height: 500px;
		border: 1px solid #fff;
		background-color: rgb(167 159 167 / 35%);
		border-radius: 10px;
		max-width: 500px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.box label{
		width: 90%;
		margin-top: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 35px;
		color:#fff;
	}
	.box label span{
		font-size: 1.2em;
		margin-bottom: -20px;
	}
	.box  label input{
		color:#fff;
		font-size: 1.5em;
		width: 60%;
		border: none;
		outline: none;
		margin-top: 20px;
		background:transparent;
		border-bottom: 2px solid #fff;
		padding:5px;
	}
	.box .button button{
		margin-top: 50px;
		font-size: 1.5em;
		padding:25px 60px;
	}
</style>